﻿@page "/Doc/Media"
<UIColumns>
    <UIColumn Size="UIEColumnSize.X2">
        <DocsMenu />
    </UIColumn>
    <UIColumn Size="UIEColumnSize.X10">
        <UIH2>媒体对象(UIMedia)</UIH2>
        <UIH3>容纳多种媒体组件的容器。</UIH3>
        <UIContent>
            <p><code>UIMedia</code> 组件可用于组成复杂的媒体对象。</p>
            <p>其内部组成层次结构为：</p>
            <ul>
                <li><code>UIMedia</code> 最外层容器</li>
                <ul>
                    <li><code>UIMediaLeft</code> 靠左</li>
                    <li><code>UIEMediaContent</code>中间</li>
                    <li><code>UIMediaRight</code> 靠右</li>
                </ul>
            </ul>
            <p><code>UIMedia</code> 和 <code>UILevel</code> 较为相似，都是用于水平组合多种元素。
            <code>UILevel</code> 主要是水平多种元素，靠左靠右浮动。<code>UIMedia</code> 是左中右三个部分组成。</p>
        </UIContent>
        <UIContent>
            <p><code>UIMedia</code> 每天对象组件非常适合重复嵌套的UI元素。内容分为左中右三个部分。下面来完成一些组合元素块。代码模板如下：</p>
            <UICode>
                &lt;UIMedia&gt;
                &lt;UIMediaLeft&gt;
                &lt;!----&gt;
                &lt;/UIMediaLeft&gt;

                &lt;UIMediaContent&gt;
                &lt;!----&gt;
                &lt;/UIMediaContent&gt;

                &lt;UIMediaRight&gt;
                &lt;!----&gt;
                &lt;/UIMediaRight&gt;
                &lt;/UIMedia&gt;
            </UICode>
        </UIContent>
        <UIContent>
            <p>下面来做一个类似推特消息的组合组件。</p>
        </UIContent>
        <UIBox>
            <UIColumns>
                <UIColumn>
                    <UIMedia>
                        <UIMediaLeft>
                            <UIImage Size="UIEImageSize.PX128">
                                <img src="images/128x128.png">
                            </UIImage>
                        </UIMediaLeft>
                        <UIMediaContent>
                            <UIContent>
                                <p>
                                    <strong>John Smith</strong> <small>&#64;johnsmith</small> <small>31m</small>
                                    <br>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
                                </p>
                            </UIContent>
                            <UILevel>
                                <UILevelLeft>
                                    <UILevelItem>
                                        <UIIcon Size="UIETextSize.Small" IconClass="fas fa-reply"/>
                                    </UILevelItem>
                                    <UILevelItem>
                                        <UIIcon Size="UIETextSize.Small" IconClass="fas fa-retweet" />
                                    </UILevelItem>
                                    <UILevelItem>
                                        <UIIcon Size="UIETextSize.Small" IconClass="fas fa-heart" />
                                    </UILevelItem>
                                </UILevelLeft>
                            </UILevel>
                        </UIMediaContent>

                        <UIMediaRight>
                            <UIDelete />
                        </UIMediaRight>
                    </UIMedia>
                </UIColumn>
            </UIColumns>
        </UIBox>
        <UIBox>
            <UIContent>
                <pre><code class="language-html hljs xml">
<span class="hljs-tag">&lt;<span class="hljs-name">UIMedia</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIMediaLeft</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIImage</span> <span class="hljs-attr">Size</span>=<span class="hljs-string">"UIEImageSize.PX128"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"images/128x128.png"</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIImage</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIMediaLeft</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIMediaContent</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIContent</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>John Smith<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">small</span>&gt;</span><span class="hljs-symbol">&amp;#64;</span>johnsmith<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">small</span>&gt;</span>31m<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
                <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIContent</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevel</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevelLeft</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevelItem</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIIcon</span> <span class="hljs-attr">Size</span>=<span class="hljs-string">"UIETextSize.Small"</span> <span class="hljs-attr">IconClass</span>=<span class="hljs-string">"fas fa-reply"</span>/&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UILevelItem</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevelItem</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIIcon</span> <span class="hljs-attr">Size</span>=<span class="hljs-string">"UIETextSize.Small"</span> <span class="hljs-attr">IconClass</span>=<span class="hljs-string">"fas fa-retweet"</span> /&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UILevelItem</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevelItem</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIIcon</span> <span class="hljs-attr">Size</span>=<span class="hljs-string">"UIETextSize.Small"</span> <span class="hljs-attr">IconClass</span>=<span class="hljs-string">"fas fa-heart"</span> /&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UILevelItem</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UILevelLeft</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UILevel</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIMediaContent</span>&gt;</span>

                <span class="hljs-tag">&lt;<span class="hljs-name">UIMediaRight</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIDelete</span> /&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIMediaRight</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">UIMedia</span>&gt;</span>
        </code></pre>
            </UIContent>
        </UIBox>
        <UIContent>
            <p>下面，我们来继续实现一个评论框。</p>
        </UIContent>
        <UIBox>
            <UIMedia>
                <UIMediaLeft>
                    <UIImage Size="UIEImageSize.PX64"><img src="/images/128x128.png" /></UIImage>
                </UIMediaLeft>
                <UIMediaContent>
                    <UIField>
                        <UIControl>
                            <UITextarea Placeholder="Add a comment..."></UITextarea>
                        </UIControl>
                    </UIField>
                        <UILevel>
                            <UILevelLeft>
                                <UILevelItem><UIButton Color="UIEColor.Info">提交评论</UIButton></UILevelItem>
                            </UILevelLeft>
                            <UILevelRight>
                                <UILevelItem>
                                    <UICheckbox>同时转发到个人空间</UICheckbox>
                                </UILevelItem>
                            </UILevelRight>
                        </UILevel>
                </UIMediaContent>
            </UIMedia>
        </UIBox>

        <UIBox>
            <UIContent>
                <pre><code class="language-html hljs xml">
<span class="hljs-tag">&lt;<span class="hljs-name">UIMedia</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIMediaLeft</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIImage</span> <span class="hljs-attr">Size</span>=<span class="hljs-string">"UIEImageSize.PX64"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/images/128x128.png"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UIImage</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIMediaLeft</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIMediaContent</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIField</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UIControl</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UITextarea</span> <span class="hljs-attr">Placeholder</span>=<span class="hljs-string">"Add a comment..."</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UITextarea</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIControl</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIField</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevel</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevelLeft</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevelItem</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">UIButton</span> <span class="hljs-attr">Color</span>=<span class="hljs-string">"UIEColor.Info"</span>&gt;</span>提交评论<span class="hljs-tag">&lt;/<span class="hljs-name">UIButton</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">UILevelItem</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UILevelLeft</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevelRight</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UILevelItem</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">UICheckbox</span>&gt;</span>同时转发到个人空间<span class="hljs-tag">&lt;/<span class="hljs-name">UICheckbox</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UILevelItem</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UILevelRight</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UILevel</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">UIMediaContent</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">UIMedia</span>&gt;</span>
        </code></pre>
            </UIContent>
        </UIBox>
    </UIColumn>
</UIColumns>

